chartManager = {
    init: function () {
        this.obj = {
            monthSupportWaterChart: {
                data: [110, 130, 160, 200, 180, 170, 130, 150, 80, 70, 110, 130]
            },
            daySupportWaterChart: {
                data: [100, 120, 210, 260, 340, 530, 610, 500, 420, 310, 260, 140, 230, 310, 400, 520, 610, 560, 540, 330, 210, 150, 200, 160]
            },
            hourSupportWaterNumChart: {
                data: [100, 120, 210, 260, 340, 530, 610, 500, 420, 310, 260, 140, 230, 310, 400, 520, 610, 560, 540, 330, 210, 150, 200, 160]
            },
            totalOutWaterNumChart: {
                data: [100, 120, 210, 260, 340, 530, 610, 500, 420, 310, 100, 120, 210, 260, 340, 530, 610, 500, 420, 310, 610, 500, 420, 310],
            },
            energyScaleNumChart: {
                data1: [110, 130, 160, 200, 180, 170, 130, 150],
                data2: [55, 30, 60, 100, 80, 70, 30, 50],
            },
            totalTableNumChart: {
                data1: [110, 130, 160, 200, 180, 170, 130, 150],
                data2: [55, 30, 60, 100, 80, 70, 30, 50]
            },
            quotaMaxMinValueChart: {
                data1: [100, 120, 210, 260, 340, 530, 610, 500, 400, 300],
                data2: [200, 230, 310, 300, 440, 630, 810, 600, 450, 350]
            },
            energyEfficiencyRatioChart: {
                data: [
                    {value: 335, name: '水厂1'},
                    {value: 310, name: '水厂2'},
                    {value: 274, name: '水厂3'},
                    {value: 235, name: '水厂4'},
                    {value: 400, name: '水厂5'},
                    {value: 400, name: '其他'},
                ].sort(function (a, b) {
                    return a.value - b.value;
                })
            },
            pieItemChart:{
                item1Data:50,
                item2Data:20,
                item3Data:10,
                item4Data:12,
                item5Data:8
            }
        }

        this.vars = {
            areaName: "陕西省",
            areaCount: 82
        };

        this.initMap();

        this.backHome();

        //初始化函数
        this.monthSupportWaterNumChart();
        this.daySupportWaterNum();
        this.hourSupportWaterNumChart();
        this.quotaMaxMinValueChart();

        //初始化仪表盘
        this.dashboardItem1Chart();
        this.dashboardItem2Chart();
        this.dashboardItem3Chart();
        this.dashboardItem4Chart();
        this.dashboardItem5Chart();
        this.dashboardItem6Chart();
        this.dashboardItem7Chart();
        this.dashboardItem8Chart();


        this.pieItem1Chart();
        this.pieItem2Chart();
        this.pieItem3Chart();
        this.pieItem4Chart();
        this.pieItem5Chart();


        this.totalOutWaterNumChart();
        this.energyScaleNumChart();
        this.totalTableNum();

        this.energyEfficiencyRatioChart();
    },
    randomFun: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    },
    updateData: function () {
        var self = this;
        $(".area-name").html(self.vars.areaName);
        $("#area_count").html(self.vars.areaCount);
        $("#reach_standard_percent").html(self.randomFun(60, 99));
        $("#cur_day_water_num").html(self.randomFun(200, 400));
        $("#cur_month_water_num").html(self.randomFun(10000, 30000));
        $("#cur_yaer_water_num").html(self.randomFun(50000, 90000));
        $("#water_fee_percent").html(self.randomFun(70, 99));
        $("#other_num").html(self.randomFun(2000, 50000));

        $("#water_src_count").html(self.randomFun(20, 60));
        $("#pipe_count").html(self.randomFun(20, 60));
        $("#water_factory_count").html(self.randomFun(20, 100));
        $("#water_net_count").html(self.randomFun(20, 100));
        $("#use_water_family").html(self.randomFun(10000, 99999));
        $("#water_table_count").html(self.randomFun(10000, 99999));
        $("#water_out_num").html(self.randomFun(10000, 99999));

        self.obj.monthSupportWaterChart.data = [self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320), self.randomFun(100, 320)];
        self.obj.daySupportWaterChart.data = [self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600)];
        self.obj.hourSupportWaterNumChart.data = [self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600)];
        self.obj.totalOutWaterNumChart.data = [self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600)];
        self.obj.energyScaleNumChart.data1 = [self.randomFun(150, 350), self.randomFun(150, 350), self.randomFun(150, 350), self.randomFun(150, 350), self.randomFun(150, 350), self.randomFun(150, 350), self.randomFun(150, 350), self.randomFun(150, 350)];
        self.obj.energyScaleNumChart.data2 = [self.randomFun(50, 150), self.randomFun(50, 150), self.randomFun(50, 150), self.randomFun(50, 150), self.randomFun(50, 150), self.randomFun(50, 150), self.randomFun(50, 150), self.randomFun(50, 150)];

        self.obj.totalTableNumChart.data1 = [self.randomFun(100, 200), self.randomFun(100, 200), self.randomFun(100, 200), self.randomFun(100, 200), self.randomFun(100, 200), self.randomFun(100, 200), self.randomFun(100, 200), self.randomFun(100, 200)];
        self.obj.totalTableNumChart.data2 = [self.randomFun(30, 100), self.randomFun(30, 100), self.randomFun(30, 100), self.randomFun(30, 100), self.randomFun(30, 100), self.randomFun(30, 100), self.randomFun(30, 100), self.randomFun(30, 100)]

        self.obj.quotaMaxMinValueChart.data1 = [self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600), self.randomFun(100, 600)];
        self.obj.quotaMaxMinValueChart.data2 = [self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600), self.randomFun(300, 600)];

        self.obj.energyEfficiencyRatioChart.data = [
            {value: self.randomFun(200, 500), name: '水厂1'},
            {value: self.randomFun(200, 500), name: '水厂2'},
            {value: self.randomFun(200, 500), name: '水厂3'},
            {value: self.randomFun(200, 500), name: '水厂4'},
            {value: self.randomFun(200, 500), name: '水厂5'},
            {value: self.randomFun(200, 500), name: '其他'},
        ].sort(function (a, b) {
            return a.value - b.value;
        });

        self.obj.pieItemChart.item1Data = self.randomFun(40, 60);
        self.obj.pieItemChart.item2Data = self.randomFun(20, 100-self.obj.pieItemChart.item1Data-10);
        self.obj.pieItemChart.item3Data = self.randomFun(10, 100-self.obj.pieItemChart.item1Data-self.obj.pieItemChart.item2Data-10);
        self.obj.pieItemChart.item4Data = self.randomFun(5, 100-self.obj.pieItemChart.item1Data-self.obj.pieItemChart.item2Data-self.obj.pieItemChart.item3Data-5);
        self.obj.pieItemChart.item5Data = 100-self.obj.pieItemChart.item1Data-self.obj.pieItemChart.item2Data-self.obj.pieItemChart.item3Data-self.obj.pieItemChart.item4Data;

        self.monthSupportWaterNumChart();
        self.daySupportWaterNum();
        self.hourSupportWaterNumChart();
        self.totalOutWaterNumChart();
        self.energyScaleNumChart();
        self.totalTableNum();
        self.quotaMaxMinValueChart();
        self.energyEfficiencyRatioChart();

        self.pieItem1Chart();
        self.pieItem2Chart();
        self.pieItem3Chart();
        self.pieItem4Chart();
        self.pieItem5Chart();
    },
    backHome: function () {
        var self = this;
        $("#sys_name").click(function () {
            self.vars.areaName = '陕西省';
            self.vars.areaCount = 82;
            self.initMap();
            self.updateData();
        });
    },
    /*当月供水量*/
    monthSupportWaterNumChart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_month_support_water_num'));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}月<br>{c}'
            },
            xAxis: {
                type: 'category',
                data: ['10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            series: [{
                data: self.obj.monthSupportWaterChart.data,
                type: 'bar',
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            var colorList = [
                                '#298cfc', '#298cfc', '#298cfc', '#ffb93e', '#ffb93e',
                                '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e',
                                '#ffb93e', '#ffb93e'
                            ];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                // barWidth: 35,
            }]
        };

        myChart.setOption(option);
    },
    /*当日供水量*/
    daySupportWaterNum: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_day_support_water_num'));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}点供水量<br>{c}'
            },
            calculable: true,
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                },

            },
            dataZoom: [//给x轴设置滚动条
                {
                    start: 0,//默认为0
                    end: 100,//默认为100
                    type: 'slider',
                    show: false,
                    xAxisIndex: [0],
                    handleSize: 0,//滑动条的 左右2个滑动条的大小
                    height: 8,//组件高度
                    left: 50, //左边的距离
                    right: 40,//右边的距离
                    bottom: 26,//右边的距离
                    handleColor: '#ddd',//h滑动图标的颜色
                    handleStyle: {
                        borderColor: "#cacaca",
                        borderWidth: "1",
                        shadowBlur: 2,
                        background: "#ddd",
                        shadowColor: "#ddd",
                    },
                    fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                        //给第一个设置0，第四个设置1，就是垂直渐变
                        offset: 0,
                        color: '#1eb5e5'
                    }, {
                        offset: 1,
                        color: '#5ccbb1'
                    }]),
                    backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,//默认为1
                    end: 100,//默认为100
                },
            ],

            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            series: [
                {
                    name: '水量',
                    type: 'line',
                    smooth: true,
                    /*区域颜色*/
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 1, color: '#1a48a8'},
                                    {offset: 0.5, color: '#0e3364'},
                                    {offset: 0, color: '#05182f'}
                                ]
                            )
                        }
                    },
                    /*线条颜色*/
                    itemStyle: {normal: {color: '#32A8FF'}},
                    data: self.obj.daySupportWaterChart.data
                }
            ]
        };
        myChart.setOption(option);
    },
    /*每小时流量统计*/
    hourSupportWaterNumChart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_hour_support_water_num'));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}点流量<br>{c}'
            },
            dataZoom: [//给x轴设置滚动条
                {
                    start: 0,//默认为0
                    end: 100,//默认为100
                    type: 'slider',
                    show: false,
                    xAxisIndex: [0],
                    handleSize: 0,//滑动条的 左右2个滑动条的大小
                    height: 8,//组件高度
                    left: 50, //左边的距离
                    right: 40,//右边的距离
                    bottom: 26,//右边的距离
                    handleColor: '#ddd',//h滑动图标的颜色
                    handleStyle: {
                        borderColor: "#cacaca",
                        borderWidth: "1",
                        shadowBlur: 2,
                        background: "#ddd",
                        shadowColor: "#ddd",
                    },
                    fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                        //给第一个设置0，第四个设置1，就是垂直渐变
                        offset: 0,
                        color: '#1eb5e5'
                    }, {
                        offset: 1,
                        color: '#5ccbb1'
                    }]),
                    backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,//默认为1
                    end: 100,//默认为100
                },
            ],
            xAxis: {
                type: 'category',
                data: ['14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            series: [{
                data: self.obj.hourSupportWaterNumChart.data,
                type: 'bar',
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            var colorList = [
                                '#298cfc', '#298cfc', '#298cfc', '#298cfc', '#298cfc', '#298cfc',
                                '#298cfc', '#298cfc', '#298cfc', '#298cfc', '#ffb93e', '#ffb93e',
                                '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e',
                                '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e'
                            ];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                // barWidth: 14,
            }]
        };

        myChart.setOption(option);
    },
    /*N座水厂实时进出厂流量*/
    totalOutWaterNumChart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_total_out_water_num'));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}点流量<br>{c}'
            },
            dataZoom: [//给x轴设置滚动条
                {
                    start: 0,//默认为0
                    end: 100,//默认为100
                    type: 'slider',
                    show: false,
                    xAxisIndex: [0],
                    handleSize: 0,//滑动条的 左右2个滑动条的大小
                    height: 8,//组件高度
                    left: 50, //左边的距离
                    right: 40,//右边的距离
                    bottom: 26,//右边的距离
                    handleColor: '#ddd',//h滑动图标的颜色
                    handleStyle: {
                        borderColor: "#cacaca",
                        borderWidth: "1",
                        shadowBlur: 2,
                        background: "#ddd",
                        shadowColor: "#ddd",
                    },
                    fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                        //给第一个设置0，第四个设置1，就是垂直渐变
                        offset: 0,
                        color: '#1eb5e5'
                    }, {
                        offset: 1,
                        color: '#5ccbb1'
                    }]),
                    backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,//默认为1
                    end: 100,//默认为100
                },
            ],
            xAxis: {
                type: 'category',
                data: ['14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'],
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            series: [{
                data: self.obj.totalOutWaterNumChart.data,
                type: 'bar',
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            var colorList = [
                                '#298cfc', '#298cfc', '#298cfc', '#298cfc', '#298cfc', '#298cfc',
                                '#298cfc', '#298cfc', '#298cfc', '#298cfc', '#ffb93e', '#ffb93e',
                                '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e',
                                '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e', '#ffb93e'
                            ];
                            return colorList[params.dataIndex]
                        }
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                barWidth: 14,
            }, {
                name: '折线',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#dba23b'
                    }
                },
                data: self.obj.totalOutWaterNumChart.data
            }]
        };
        myChart.setOption(option);
    },
    /*水量能耗比*/
    energyScaleNumChart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_energy_scale_num'));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}号水厂<br>水量{c0}<br>能耗{c1}'
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8'],
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            series: [{
                data: self.obj.energyScaleNumChart.data1,
                type: 'bar',
                stack: '能耗比',
                itemStyle: {
                    normal: {
                        color: '#2969fc'
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                // barWidth: 35,
            }, {
                data: self.obj.energyScaleNumChart.data2,
                type: 'bar',
                stack: '能耗比',
                itemStyle: {
                    normal: {
                        color: '#ffb93e'
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                // barWidth: 35,
            }]
        };
        myChart.setOption(option);
    },
    /*抄表量、计收量*/
    totalTableNum: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_total_table_num'));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b}号水厂<br>水量{c0}<br>能耗{c1}'
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8'],
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            series: [{
                data: self.obj.totalTableNumChart.data1,
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#2969fc'
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                // barWidth: 25,
            }, {
                data: self.obj.totalTableNumChart.data2,
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: '#ffb93e'
                    }
                },
                //设置柱的宽度，要是数据太少，柱子太宽不美观~
                // barWidth: 25,
            }]
        };
        myChart.setOption(option);
    },
    /*各指标最大最小值*/
    quotaMaxMinValueChart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_quota_max_min_value'));
        var option = {
            tooltip: {
                trigger: 'axis',
                formatter: 'PH值<br>最小值{c0}<br>最大值{c1}'
            },
            calculable: true,
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                },

            },
            dataZoom: [//给x轴设置滚动条
                {
                    start: 0,//默认为0
                    end: 100,//默认为100
                    type: 'slider',
                    show: false,
                    xAxisIndex: [0],
                    handleSize: 0,//滑动条的 左右2个滑动条的大小
                    height: 8,//组件高度
                    left: 50, //左边的距离
                    right: 40,//右边的距离
                    bottom: 26,//右边的距离
                    handleColor: '#ddd',//h滑动图标的颜色
                    handleStyle: {
                        borderColor: "#cacaca",
                        borderWidth: "1",
                        shadowBlur: 2,
                        background: "#ddd",
                        shadowColor: "#ddd",
                    },
                    fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                        //给第一个设置0，第四个设置1，就是垂直渐变
                        offset: 0,
                        color: '#1eb5e5'
                    }, {
                        offset: 1,
                        color: '#5ccbb1'
                    }]),
                    backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,//默认为1
                    end: 100,//默认为100
                },
            ],

            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 20
                    }
                }
            },
            series: [
                {
                    name: 'min',
                    type: 'line',
                    smooth: true,
                    stack: '指标值',
                    /*区域颜色*/
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 1, color: '#1a48a8'},
                                    {offset: 0.5, color: '#0e3364'},
                                    {offset: 0, color: '#05182f'}
                                ]
                            )
                        }
                    },
                    /*线条颜色*/
                    itemStyle: {normal: {color: '#359fe8'}},
                    data: self.obj.quotaMaxMinValueChart.data1
                },
                {
                    name: 'max',
                    type: 'line',
                    smooth: true,
                    stack: '指标值',
                    /*区域颜色*/
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#8f7d33'},
                                    {offset: 0.5, color: '#5c5836'},
                                    {offset: 1, color: '#2d3634'}
                                ]
                            )
                        }
                    },
                    /*线条颜色*/
                    itemStyle: {normal: {color: '#8eac3c'}},
                    data: self.obj.quotaMaxMinValueChart.data2
                }
            ]
        };
        myChart.setOption(option);
    },
    dashboardItem1Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_1'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: 'COD值',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: 'COD值',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: 'COD值',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    dashboardItem2Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_2'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: 'PH值',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: 'PH值',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: 'PH值',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    dashboardItem3Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_3'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: '浊度',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: '浊度',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: '浊度',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    dashboardItem4Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_4'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: '氨氮',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: '氨氮',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: '氨氮',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    dashboardItem5Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_5'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: 'COD值',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: 'COD值',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: 'COD值',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    dashboardItem6Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_6'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: '浊度',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: '浊度',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: '浊度',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    dashboardItem7Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_7'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: '余氯',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: '余氯',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: '余氯',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    dashboardItem8Chart: function () {
        var myChart = echarts.init(document.getElementById('dashboard_item_8'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            title: {
                x: 'center',
                y: '63%',
                bottom: 50,
                text: '氨氮',
                textStyle: {
                    fontWeight: 'bold',
                    fontSize: 20,
                    color: "#ffffff"
                }
            },
            series: [
                {
                    name: '氨氮',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '70%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 10, name: 'gas'}]
                }, {
                    name: '氨氮',
                    type: 'gauge',
                    center: ['50%', '50%'],    // 默认全局居中
                    radius: '80%',
                    min: 0,
                    max: 100,
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                            width: 2,
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 12,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    axisLabel: {
                        textStyle: {       // 属性lineStyle控制线条样式
                            fontWeight: 'bolder',
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        },
                        formatter: function (v) {
                            switch (v + '') {
                                case '0' :
                                    return '0';
                                case '50' :
                                    return '50';
                                case '100' :
                                    return '100';
                            }
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 15,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            width: 3,
                            color: '#fff',
                            shadowColor: '#fff', //默认透明
                            shadowBlur: 10
                        }
                    },
                    pointer: {
                        width: 2,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 5
                    },
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    data: [{value: 30, name: 'gas'}]
                }
            ]
        };
        myChart.setOption(option);
        setInterval(function () {
            option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            option.series[1].data[0].value = (Math.random() * 100).toFixed(2) - 0;
            myChart.setOption(option);
        }, 2000);
    },
    pieItem1Chart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('pie_item_1'));
        var e = self.obj.pieItemChart.item1Data;
        var option = {
            title: {
                show: true,
                text: e + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: '30',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{d}%",
                show: false
            },
            //图例
            legend: {
                //图例垂直排列
                orient: 'vertical',
                x: 'center',
                y: '70%',
                //data中的名字要与series-data中的列名对应，方可点击操控
                data: ['居民用水', ''],
                textStyle: {
                    fontSize: '18',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            color: ['#22ffb9', '#132c4e'],
            series:
                {
                    name: '',
                    type: 'pie',
                    radius: ['65%', '85%'],
                    avoidLabelOverlap: true,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: e, name: '居民用水'},
                        {value: 100 - e, name: ''}
                    ]
                }
        };
        myChart.setOption(option);
    },
    pieItem2Chart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('pie_item_2'));
        var e = self.obj.pieItemChart.item2Data;;
        var option = {
            title: {
                show: true,
                text: e + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: '30',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{d}%",
                show: false
            },
            //图例
            legend: {
                //图例垂直排列
                orient: 'vertical',
                x: 'center',
                y: '70%',
                //data中的名字要与series-data中的列名对应，方可点击操控
                data: ['非居民用水', ''],
                textStyle: {
                    fontSize: '18',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            color: ['#ffb93e', '#132c4e'],
            series:
                {
                    name: '',
                    type: 'pie',
                    radius: ['65%', '85%'],
                    avoidLabelOverlap: true,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: e, name: '非居民用水'},
                        {value: 100 - e, name: ''}
                    ]
                }
        };
        myChart.setOption(option);
    },
    pieItem3Chart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('pie_item_3'));
        var e = self.obj.pieItemChart.item3Data;
        var option = {
            title: {
                show: true,
                text: e + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: '30',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{d}%",
                show: false
            },
            //图例
            legend: {
                //图例垂直排列
                orient: 'vertical',
                x: 'center',
                y: '70%',
                //data中的名字要与series-data中的列名对应，方可点击操控
                data: ['特种行业', ''],
                textStyle: {
                    fontSize: '18',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            color: ['#00aeff', '#132c4e'],
            series:
                {
                    name: '',
                    type: 'pie',
                    radius: ['65%', '85%'],
                    avoidLabelOverlap: true,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: e, name: '特种行业'},
                        {value: 100 - e, name: ''}
                    ]
                }
        };
        myChart.setOption(option);
    },
    pieItem4Chart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('pie_item_4'));
        var e = self.obj.pieItemChart.item4Data;
        var option = {
            title: {
                show: true,
                text: e + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: '30',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{d}%",
                show: false
            },
            //图例
            legend: {
                //图例垂直排列
                orient: 'vertical',
                x: 'center',
                y: '70%',
                //data中的名字要与series-data中的列名对应，方可点击操控
                data: ['农村', ''],
                textStyle: {
                    fontSize: '18',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            color: ['#0072ff', '#132c4e'],
            series:
                {
                    name: '',
                    type: 'pie',
                    radius: ['65%', '85%'],
                    avoidLabelOverlap: true,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: e, name: '农村'},
                        {value: 100 - e, name: ''}
                    ]
                }
        };
        myChart.setOption(option);
    },
    pieItem5Chart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('pie_item_5'));
        var e = self.obj.pieItemChart.item5Data;
        var option = {
            title: {
                show: true,
                text: e + '%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: '30',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{d}%",
                show: false
            },
            //图例
            legend: {
                //图例垂直排列
                orient: 'vertical',
                x: 'center',
                y: '70%',
                //data中的名字要与series-data中的列名对应，方可点击操控
                data: ['其他', ''],
                textStyle: {
                    fontSize: '18',
                    color: 'white',
                    fontWeight: 'normal'
                }
            },
            color: ['#5e50e7', '#132c4e'],
            series:
                {
                    name: '',
                    type: 'pie',
                    radius: ['65%', '85%'],
                    avoidLabelOverlap: true,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: e, name: '其他'},
                        {value: 100 - e, name: ''}
                    ]
                }
        };
        myChart.setOption(option);
    },
    energyEfficiencyRatioChart: function () {
        var self = this;
        var myChart = echarts.init(document.getElementById('chart_energy_efficiency_ratio'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [
                {
                    name: '能效占比',
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '50%'],
                    data: self.obj.energyEfficiencyRatioChart.data,
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        myChart.setOption(option);
    },
    initMap: function () {
        var self = this;
        $.getJSON("/json/陕西/陕西.json", function (mapJson) {
            echarts.registerMap('陕西', mapJson);

            //初始化DataArray
            var dataArray = [];
            mapJson.features.forEach(function (item, index) {
                dataArray.push({name: item.properties.name, value: index + 1});
            });

            var chart = echarts.init(document.getElementById('proe_map'));//在id为mainMap的dom元素中显示地图
            chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: function (result) {//回调函数，参数params具体格式参加官方API
                        return result.name;
                    }
                },
                dataRange: {
                    min: 0,
                    max: 20,
                    splitNumber: 0,
                    text: ['高', '低'],
                    realTime: false,
                    calculable: false,
                    selectedMode: false,
                    show: false,
                    itemWidth: 10,
                    itemHeight: 60,
                    color: ['#022865', '#026ec3']
                },
                title: {
                    text: '全省数据总览',
                    //subtext:'',
                    x: 'center',
                    y: 'top',
                    textAlign: 'left',
                    show: false
                },

                series: [{
                    type: 'map',
                    map: '陕西',//要和echarts.registerMap（）中第一个参数一致
                    scaleLimit: {min: 0.8, max: 1.9},//缩放
                    mapLocation: {
                        y: 60
                    },
                    itemSytle: {
                        emphasis: {label: {show: false}}
                    },
                    label: {
                        "normal": {
                            "show": true,
                            /*"textStyle": {
                                // "color": '#ffffff',
                                "fontSize": 20
                            }*/
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: dataArray
                }]

            });
            chart.on('click', function (result) {//回调函数，点击时触发，参数params格式参加官方API
                //选择省的单击事件
                var selectCity = result.name;
                //    调取后台数据
                $.get('json/陕西/' + selectCity + '.json', function (areamap) {

                    echarts.registerMap(selectCity, areamap);
                    var myChartCity = echarts.init(document.getElementById('proe_map'));

                    //初始化DataArray
                    var dataArray = [];
                    areamap.features.forEach(function (item, index) {
                        dataArray.push({name: item.properties.name, value: index + 1});
                    });

                    self.vars.areaName = selectCity;
                    self.vars.areaCount = dataArray.length;
                    self.updateData();

                    myChartCity.setOption({
                        tooltip: {
                            trigger: 'item',
                            formatter: function loadData(result) {//回调函数，参数params具体格式参加官方API
                                return result.name;
                            }
                        },
                        dataRange: {
                            min: 0,
                            max: 20,
                            text: ['高', '低'],
                            realTime: false,
                            calculable: false,
                            splitNumber: 0,
                            itemWidth: 10,
                            show: false,
                            itemHeight: 60,
                            color: ['#022865', '#026ec3']
                        },
                        title: {
                            text: selectCity + '数据总览',
                            //subtext:'',
                            x: 'center',
                            y: 'top',
                            textAlign: 'left',
                            show: false
                        },
                        series: [{
                            type: 'map',
                            map: selectCity,//要和echarts.registerMap（）中第一个参数一致
                            scaleLimit: {min: 0.8, max: 1.9},//缩放
                            mapLocation: {
                                y: 60
                            },
                            itemSytle: {
                                emphasis: {label: {show: false}}
                            },
                            label: {
                                "normal": {
                                    "show": true,
                                    /*"textStyle": {
                                        // "color": '#ffffff',
                                        "fontSize": 20
                                    }*/
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data: dataArray
                        }]
                    });
                    myChartCity.on('click', function (rel) {
                        var selectArea = rel.name;
                        console.info("click = " + selectArea)
                        self.vars.areaName = selectArea;
                        self.vars.areaCount = 1;
                        self.updateData();
                    });
                });
            });
        });
    }
}

$(function () {
    chartManager.init();
});